<template>
  <div class="death-book">
    <div class="death-book__title" style="font-size: 15px;" v-if="showAll || first">附件1:</div>
    <!-- 第一、二、三、四联 -->
    <div class="death-book__section" v-for="(item, index) in fileArray" :key="index">
      <div class="death-book__sider" v-html="item.sider"></div>
      <div class="death-book__inner">
        <div class="death-book__title">
          <span>{{ item.title }}</span>
        </div>
        <div class="death-book__place" v-if="(showAll || first) && index === 0">{{ hospitalInfo.province | getText
        }}(自治区、直辖市){{
            hospitalInfo.city | getText
          }}(地区、州、盟){{ hospitalInfo.country | getText }}(区、旗)
        </div>
        <div class="death-book__row" v-if="showAll && index != 1 || first || other">
          <div class="death-book__row-item w-50p">
            <div class="death-book__label">行政区划代码：</div>
            <div class="death-book__content">{{ hospitalInfo.orgCode | getText }}</div>
          </div>
          <div class="death-book__row-item w-50p flex-end">
            <div class="death-book__label">编号：</div>
            <div class="death-book__content">{{ info.cardNo | getText }}</div>
          </div>
        </div>

        <div class="death-book__table" v-if="(showAll || first) && index === 0">
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-13p">姓名</div>
            <div class="death-book__table-item w-19p">{{ info.name | getText }}</div>
            <div class="death-book__table-item w-8p">性别</div>
            <div class="death-book__table-item w-15p">{{ genderMap[info.gender] | getText }}</div>
            <div class="death-book__table-item w-10p">民族</div>
            <div class="death-book__table-item w-12p">{{ nationMap[info.nation] | getText }}</div>
            <div class="death-book__table-item w-11p">国家或地区</div>
            <div class="death-book__table-item w-12p">{{ countryMap[info.country] | getText }}</div>

          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-13p">证件类型</div>
            <div class="death-book__table-item w-19p">{{ idcardTypeMap[info.idcardType] | getText }}</div>
            <div class="death-book__table-item w-8p">证件号码</div>
            <div class="death-book__table-item w-15p">{{ info.idcardCode | getText }}</div>
            <div class="death-book__table-item w-10p">死亡年龄（岁）</div>
            <div class="death-book__table-item w-12p">{{ info.age | getText }}&emsp;{{ ageUnitCodeMap[info.ageUnitCode]
              | getText }}
            </div>
            <div class="death-book__table-item w-11p">婚姻状态</div>
            <div class="death-book__table-item w-12p">{{ maritalStatusMap[info.maritalStatus] | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-13p">出生日期</div>
            <div class="death-book__table-item w-19p">{{ birthDateObj.year | getText }}年{{ birthDateObj.month |
              getText }}月{{ birthDateObj.date | getText }}日</div>
            <div class="death-book__table-item w-8p">文化程度</div>
            <div class="death-book__table-item w-15p">{{ educatoinLevelMap[info.educatoinLevel] | getText }}</div>
            <div class="death-book__table-item w-10p">个人身份</div>
            <div class="death-book__table-item w-35p">{{ codrisOccupationMap[info.codrisOccupation] | getText }}</div>

          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-13p">死亡日期</div>
            <div class="death-book__table-item w-19p" style="text-align: right;">{{ deathDateObj.year | getText }}年{{
              deathDateObj.month |
              getText }}月{{ deathDateObj.date | getText }}日<br>{{ deathDateObj.hour | getText }}时{{ deathDateObj.minute
                | getText }}分
            </div>
            <div class="death-book__table-item w-8p">死亡地点类别</div>
            <div class="death-book__table-item w-25p">{{ deathplaceCodeMap[info.deathplaceCode] | getText }}</div>
            <div class="death-book__table-item w-23p">死亡时是否处于妊娠期或妊娠终止后42天内</div>
            <div class="death-book__table-item w-12p">{{ trueFalseMap[info.isPre] | getText }}</div>
          </div>

          <div class="death-book__table-tr" style="height: 54px;">
            <div class="death-book__table-item w-13p">工作单位</div>
            <div class="death-book__table-item w-19p">{{ info.employerOrg | getText }}</div>
            <div class="death-book__table-item w-8p">户籍地址</div>
            <div class="death-book__table-item w-25p">{{ info.domicileDetail | getText }}</div>
            <div class="death-book__table-item w-12p">常住地址</div>
            <div class="death-book__table-item w-23p">{{ info.obodeDetail | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-13p">可联系的家属姓名</div>
            <div class="death-book__table-item w-19p">{{ info.guardianName | getText }}</div>
            <div class="death-book__table-item w-8p">家属联系电话</div>
            <div class="death-book__table-item w-25p">{{ info.guardianTel | getText }}</div>
            <div class="death-book__table-item w-12p">家属住址或工作单位</div>
            <div class="death-book__table-item w-23p">{{ info.guardianAddress | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-32p">致死的主要疾病诊断</div>
            <div class="death-book__table-item w-45p">疾病名称（勿填症状体征）</div>
            <div class="death-book__table-item w-23p">发病至死亡大概间隔时间</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-32p">直接导致死亡的疾病A</div>
            <div class="death-book__table-item w-45p">{{ info.causeA | getText }}</div>
            <div class="death-book__table-item w-23p">{{ info.intervalTimeA | getText }}&emsp;{{
              intervalUnitcodeAMap[info.intervalUnitcodeA] | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-32p">直接导致死亡的疾病B</div>
            <div class="death-book__table-item w-45p">{{ info.causeB | getText }}</div>
            <div class="death-book__table-item w-23p">{{ info.intervalTimeB | getText }}&emsp;{{
              intervalUnitcodeBMap[info.intervalUnitcodeB] | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-32p">直接导致死亡的疾病C</div>
            <div class="death-book__table-item w-45p">{{ info.causeC | getText }}</div>
            <div class="death-book__table-item w-23p">{{ info.intervalTimeC | getText }}&emsp;{{
              intervalUnitcodeCMap[info.intervalUnitcodeC] | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-32p">直接导致死亡的疾病D</div>
            <div class="death-book__table-item w-45p">{{ info.causeD | getText }}</div>
            <div class="death-book__table-item w-23p">{{ info.intervalTimeD | getText }}&emsp;{{
              intervalUnitcodeDMap[info.intervalUnitcodeD] | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-32p">
              ll.其他疾病诊断（促进死亡，但与导致死亡无关的其他重要情况）</div>
            <div class="death-book__table-item w-45p">{{ info.icdnameOther | getText }}</div>
            <div class="death-book__table-item w-23p"></div>
          </div>

          <div class="death-book__table-tr">
            <div class="death-book__table-item w-13p">最高诊断单位</div>
            <div class="death-book__table-item w-52p">{{ diagnosticUnitCodeMap[info.diagnosticUnitCode] | getText }}
            </div>
            <div class="death-book__table-item w-12p">最高诊断依据</div>
            <div class="death-book__table-item w-23p">{{ diagnosticBasisCodeMap[info.diagnosticBasisCode] | getText }}
            </div>
          </div>


          <div class="death-book__table-tr">
            <div class="death-book__table-item w-13p">医师签名</div>
            <div class="death-book__table-item w-19p"></div>
            <div class="death-book__table-item w-33p flex-start" style="padding: 0 8px">医疗卫生<br>机构盖章</div>
            <div class="death-book__table-item w-35p flex-start" style="padding: 0 8px">填表日期：<span
                style="margin-left: 12px;" class="inline-flex year">{{ fillCardDateObj.year | getText }}</span>年<span
                class="inline-flex month">{{
                  fillCardDateObj.month | getText }}</span>月<span class="inline-flex date">{{
                  fillCardDateObj.date | getText }}</span>日
            </div>
          </div>

          <div class="death-book__table-tr two-line">
            <div class="death-book__table-item w-65p vertical">
              <div class="w-100p" style="text-align: left;">（以下由编码人员填写）根本死亡原因：</div>
              <div class="w-100p">{{ info.basicCauseDesc | getText }}</div>
            </div>
            <div class="death-book__table-item w-35p vertical">
              <div class="w-100p" style="text-align: left;">ICD编码：</div>
              <div class="w-100p">{{ info.basicIcd10 | getText }}</div>
            </div>
          </div>
        </div>
        <div class="death-book__table" v-else-if="(showAll || first) && index == 1">
          <div class="death-book__table-tr" style="height: 104px;">
            <div class="death-book__table-item w-100p vertical">
              <div class="w-100p" style="text-align: left;">死者生前病史及症状体征：</div>
              <div class="w-100p" style="text-align: left;padding: 0 12px;">{{
                info.historyDisease | getText }}</div>
              <div class="w-100p" style="text-align: right;padding-right: 150px;">以上情况属实，被调查者签字：</div>
            </div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-11p">被调查者姓名</div>
            <div class="death-book__table-item w-11p">{{ info.respName | getText }}</div>
            <div class="death-book__table-item w-8p">与死者关系</div>
            <div class="death-book__table-item w-7p">{{ info.respRelation | getText }}</div>
            <div class="death-book__table-item w-11p">被调查者电话号码</div>
            <div class="death-book__table-item w-18p">{{ info.respTel | getText }}</div>
            <div class="death-book__table-item w-14p">联系地址或工作单位</div>
            <div class="death-book__table-item w-20p">{{ info.respAddr | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-11p">死因疾病</div>
            <div class="death-book__table-item w-26p">{{ info.verbalAutopsy | getText }}</div>
            <div class="death-book__table-item w-11p">调查者签名</div>
            <div class="death-book__table-item w-18p"></div>
            <div class="death-book__table-item w-14p">调查日期</div>
            <div class="death-book__table-item w-20p">
              <div class="w-100p">
                <span class="inline-flex year">{{ surveyDateObj.year | getText }}</span>年<span
                  class="inline-flex month">{{ surveyDateObj.month | getText }}</span>月<span class="inline-flex date">{{
                    surveyDateObj.date | getText }}</span>日
              </div>
            </div>
          </div>
        </div>

        <div class="death-book__table" v-else>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-11p">姓名</div>
            <div class="death-book__table-item w-12p">{{ info.name | getText }}</div>
            <div class="death-book__table-item w-10p">性别</div>
            <div class="death-book__table-item w-7p">{{ genderMap[info.gender] | getText }}</div>
            <div class="death-book__table-item w-11p">民族</div>
            <div class="death-book__table-item w-10p">{{ nationMap[info.nation] | getText }}</div>
            <div class="death-book__table-item w-9p">国家或地区</div>
            <div class="death-book__table-item w-11p">{{ countryMap[info.country] | getText }}</div>
            <div class="death-book__table-item w-10p">死亡年龄（岁）</div>
            <div class="death-book__table-item w-9p">{{ info.age | getText }}&emsp;{{ ageUnitCodeMap[info.ageUnitCode] |
              getText }}
            </div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-11p">证件类型</div>
            <div class="death-book__table-item w-12p">{{ idcardTypeMap[info.idcardType] | getText }}</div>
            <div class="death-book__table-item w-10p">证件号码</div>
            <div class="death-book__table-item w-18p">{{ info.idcardCode | getText }}</div>
            <div class="death-book__table-item w-10p">常住地址</div>
            <div class="death-book__table-item w-39p">{{ info.obodeDetail | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-11p">出生日期</div>
            <div class="death-book__table-item w-12p">{{ birthDateObj.year | getText }}年{{ birthDateObj.month |
              getText }}月{{ birthDateObj.date | getText }}日</div>
            <div class="death-book__table-item w-10p">死亡日期</div>
            <div class="death-book__table-item w-18p" style="text-align: right;">{{ deathDateObj.year | getText }}年{{
              deathDateObj.month | getText }}月{{ deathDateObj.date | getText }}日<br>{{ deathDateObj.hour | getText }}时{{
                deathDateObj.minute | getText }}分</div>
            <div class="death-book__table-item w-10p">死亡地点类别</div>
            <div class="death-book__table-item w-39p">{{ deathplaceCodeMap[info.deathplaceCode] | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-11p">死亡原因</div>
            <div class="death-book__table-item w-29p">{{ info.causeA | getText }}</div>
            <div class="death-book__table-item w-11p">可联系家属姓名</div>
            <div class="death-book__table-item w-19p">{{ info.guardianName | getText }}</div>
            <div class="death-book__table-item w-11p">家属联系电话</div>
            <div class="death-book__table-item w-19p">{{ info.guardianTel | getText }}</div>
          </div>
          <div class="death-book__table-tr">
            <div class="death-book__table-item w-11p">家属住址或单位</div>
            <div class="death-book__table-item w-29p">{{ info.guardianAddress | getText }}</div>
            <div class="death-book__table-item w-11p">医师签名</div>
            <div class="death-book__table-item w-19p"></div>
            <div class="death-book__table-item w-11p">民警签名</div>
            <div class="death-book__table-item w-19p"></div>
          </div>
          <div class="death-book__table-tr two-line">
            <div class="death-book__table-item w-51p vertical">
              <div class="w-100p" style="text-align: left;">卫生医疗机构盖章</div>
              <div class="w-100p" style="text-align: right;"><span style="padding-left: 40px;">年</span><span
                  style="padding-left: 40px;">月</span><span style="padding-left: 40px;">日</span>
              </div>
            </div>
            <div class="death-book__table-item w-49p vertical">
              <div class="w-100p" style="text-align: left;">派出所意见（盖章）</div>
              <div class="w-100p" style="text-align: right;"><span style="padding-left: 40px;">年</span><span
                  style="padding-left: 40px;">月</span><span style="padding-left: 40px;">日</span>
              </div>
            </div>
          </div>
        </div>
        <div class="death-book__remark">{{ item.remark }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getExactType } from '@/utils';
import { ageUnitCodeMap, codrisOccupationMap, countryMap, deathplaceCodeMap, diagnosticBasisCodeMap, diagnosticUnitCodeMap, educatoinLevelMap, genderMap, idcardTypeMap, intervalUnitcodeAMap, intervalUnitcodeBMap, intervalUnitcodeCMap, intervalUnitcodeDMap, maritalStatusMap, nationMap, trueFalseMap } from '@/utils/enum';
import { first } from 'lodash';

export default {
  name: 'DeathTable',
  props: {
    info: {
      type: Object,
      default: () => { }
    },
    first: {
      type: Boolean,
      default: false,
    },
    other: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: "info",
    event: "input",
  },
  filters: {
    getText(value) {
      let type = getExactType(value);
      return ['null', 'undefined'].includes(type) ? '' : value;
    },
  },
  computed: {
    showAll() {
      return !this.first && !this.other;
    },
    fileArray() {
      return this.first ? this.files.slice(0, 2) : this.other ? this.files.slice(2) : this.files;
    },
    fillCardDateObj() {
      let map = {};
      this.info.fillCardDate && (map = this.info.fillCardDate.split('-').reduce((acc, cur, index) => {
        acc[['year', 'month', 'date'][index]] = cur
        return acc
      }, {}))

      return map;
    },
    surveyDateObj() {
      let map = {};
      this.info.surveyDate && (map = this.info.surveyDate.split('-').reduce((acc, cur, index) => {
        acc[['year', 'month', 'date'][index]] = cur
        return acc
      }, {}))

      return map;
    },
    birthDateObj() {
      let map = {};
      this.info.birthDate && (map = this.info.birthDate.split('-').reduce((acc, cur, index) => {
        acc[['year', 'month', 'date'][index]] = cur
        return acc
      }, {}))

      return map;
    },
    deathDateObj() {
      let map = {};
      let _map = {};
      this.info.deathDate && (map = this.info.deathDate.split(' ')[0].split('-').reduce((acc, cur, index) => {
        acc[['year', 'month', 'date'][index]] = cur
        return acc
      }, {}))

      this.info.deathDate && (_map = this.info.deathDate.split(' ')[1].split(':').reduce((acc, cur, index) => {
        acc[['hour', 'minute', 'second'][index]] = cur
        return acc
      }, {}))

      return { ...map, ..._map };
    },
    hospitalInfo() {
      return this.info.hospitalInfo || {};
    },
  },
  data() {
    return {
      ageUnitCodeMap,
      genderMap,
      idcardTypeMap,
      nationMap,
      maritalStatusMap,
      countryMap,
      educatoinLevelMap,
      codrisOccupationMap,
      diagnosticUnitCodeMap,
      diagnosticBasisCodeMap,
      deathplaceCodeMap,
      trueFalseMap,
      intervalUnitcodeAMap,
      intervalUnitcodeBMap,
      intervalUnitcodeCMap,
      intervalUnitcodeDMap,
      files: [
        { sider: `<span>第</span><span>一</span><span>联</span><span style="margin-bottom: 20px;"></span><span>填</span><span>写</span><span>单</span><span>位</span><span>存</span><span>根</span>`, title: '居民死亡医学证明（推断）书', remark: '' },
        { sider: `<span></span>`, title: '死亡调查记录', remark: '注：①此表填写范围为在家、养老服务机构、其他场所正常死亡者；②被调查者应为死者近亲或知情人；③调查时应出具以下资料：被调查者有效身份证件，居住地居委会或村委会证明，死者身份证和/或户口簿、生前病史卡。' },
        { sider: `<span>第</span><span>二</span><span>联</span><span style="margin-bottom: 20px;"></span><span>公</span><span>安</span><span>机</span><span>关</span><span>保</span><span>存</span>`, title: '居民死亡医学证明（推断）书', remark: '注：①死者家属持此联到公安机关办理户籍注销手续; ②无医师及民警签字、医疗卫生机构及派出所盖章无效。' },
        { sider: `<span>第</span><span>三</span><span>联</span><span style="margin-bottom: 20px;"></span><span>死</span><span>者</span><span>家</span><span>属</span><span>保</span><span>存</span>`, title: '居民死亡医学证明（推断）书', remark: '注：①死者家属持此联到公安机关签章；②无医师及民警签字、医疗卫生机构及派出所盖章无效；③死于救治机构以外的死亡原因系死后推断。' },
        { sider: `<span style="margin-top: 40px;">第</span><span>四</span><span>联</span><span style="margin-bottom: 20px;"></span><span>殡</span><span>葬</span><span>管</span><span>理</span><span>部</span><span>门</span><span>保</span><span>存</span>`, title: '居民死亡殡葬证', remark: '注：①死者家属持此证到殡仪馆办理尸体火化手续；②死于救治机构，医师签字及医疗卫生机构盖章有效；死于非救治机构，医师及民警签字、医疗卫生机构及派出所盖章有效。' },
      ],
    };
  },

}
</script>

<style lang="scss" scoped>
.death-book {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 720px;
  line-height: 1.2;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  padding: 4px;
  position: relative;
  color: #262626;
  flex-direction: column;
  overflow-y: auto;
  word-break: break-all;

  &__section {
    display: flex;
    width: 100%;

    &:not(:first-child) {
      margin-top: 6px;
    }

    &:nth-child(4) {
      margin-top: 40px;
    }
  }

  &__sider {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-direction: column;
  }

  &__inner {
    flex: 1;
  }

  &__remark {
    text-indent: 2em;
    font-size: 13px;
    margin-top: 8px;
    text-align: left;
  }

  &__place {
    text-align: left;
  }

  &__table {
    border: 2px solid #262626;

    &-tr {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 38px;

      &:not(:last-child) {
        border-bottom: 1px solid #262626;
      }

      &.two-line {
        height: 60px;

        .death-book__table-item {
          justify-content: flex-start;
          align-items: flex-start;
          padding: 8px;
        }
      }
    }

    &-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 14px;
      padding: 0 4px;
      box-sizing: border-box;
      text-align: center;
      flex-wrap: wrap;

      &.flex-end {
        justify-content: flex-end;
      }

      &.space-between {
        justify-content: space-between;
      }

      &.flex-start {
        justify-content: flex-start;
        position: relative;

        &.one {
          &::before {
            position: absolute;
            left: 0;
            content: "1."
          }
        }

        &.oneone {
          &::before {
            position: absolute;
            left: 0;
            content: "11."
          }
        }
      }

      &.vertical {
        flex-direction: column;
        justify-content: space-between !important;
      }

      &:not(:last-child) {
        border-right: 1px solid #262626;
      }
    }
  }

  .text-label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 20px;
    color: #262626;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .text-content {
    font-family: SimSun, SimSun;
    font-weight: 400;
    font-size: 20px;
    color: #262626;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  &__title {
    text-align: center;
    font-family: STZhongsong, STZhongsong;
    font-weight: 700;
    font-size: 20px;
    font-style: normal;
    color: #262626;
    text-transform: none;
    margin-bottom: 8px;

    span {
      position: relative;
    }
  }

  &__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;

    &-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      &.flex-end {
        justify-content: flex-end;
      }
    }

    .text-content {
      font-size: 14px;
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;

      &::before {
        content: '';
        position: absolute;
        height: 1px;
        background: #262626;
        left: 0;
        right: 0;
        bottom: -6px;
      }
    }
  }

  .inline-flex {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &.year {
      width: 36px;
    }

    &.month,
    &.date {
      width: 20px;
    }
  }
}
</style>
